<template>
  <page-wrap ref="pageWrap" hideTab back title="职途顾问" :show-top="showTop" :dark="loaded ? false : true"
    :hideSafeArea="true" :bg-color="dynamicColor">
    <view class="posters-container" :style="'padding-top:' + navHeight + 'px;'">
      <scroll-view class="container" scroll-y="true" @scroll="myPageScroll">
        <image :src="postersImgUrl" mode="widthFix" class="posters"></image>
      </scroll-view>
      <view class="operate-bar" v-if="postersImgUrl">
        <u-button class="save-btn" type="primary" shape="circle" :loading="loading" @click="shareImg">{{ text
        }}</u-button>
      </view>
    </view>
    <LoginDialog ref="loginDialog"></LoginDialog>
    <u-toast ref="uToast" />
  </page-wrap>
</template>

<script>
import { getPoster } from "@/api/modules/career";
import LoginDialog from "@/components/LoginDialog";
export default {
  components: { LoginDialog },
  data() {
    return {
      dynamicTitle: "",
      showTop: false,
      dynamicColor: "#fff",
      productSign: "", // 项目类型标识
      isShare: true,
      shareTitle: "在找工作吗？职途顾问服务手把手带你掌握求职秘诀！",
      shareQuery: "",
      sharePath: "",
      consultantId: "",
      navHeight: getApp().globalData.navHeight,
      cardKey: "", // 卡类型秘文
      cardType: "", // 卡类型
      isConsultant: false,
      loading: false,
      opt: {},
      text: "图片分享保存",
      postersImgUrl: "",
      customStyle: {
        marginLeft: "12rpx",
        padding: "10rpx 22rpx",
      },
    };
  },
  onLoad(opt) {
    console.log("opt", opt);
    this.opt = opt;
    this.cardType = opt.t;
    this.productSign = opt.productSign;
    this.shareQuery = {
      // cardTypeEncrypt: this.cardKey,
      d: uni.getStorageSync("person-id").slice(2),
      i: true,
      t: this.cardType,
    };
    // this.shareQuery = {
    //   // cardTypeEncrypt: this.cardKey,
    //   consultantId: uni.getStorageSync("person-id").slice(2),
    //   isShare: true,
    //   cardType: this.cardType,
    // };
    // 小程序只能传一个参数,这个写法和其他sharePath不一样是因为分享的是图片
    // this.sharePath = `https://www.job1001.com/WuHanBuyPage?query=${JSON.stringify(
    //   this.shareQuery
    // )}`;
    this.sharePath = `https://www.job1001.com/CBuyPage?query=${JSON.stringify(
      this.shareQuery
    )}`;
    switch (this.productSign) {
      case 'ZHITU_TOC_SERVICE':
        this.sharePath = `https://www.job1001.com/CBuyPage?query=${JSON.stringify(
          this.shareQuery
        )}`;
        break;
      default:
        this.sharePath = `https://www.job1001.com/WuHanBuyPage?query=${JSON.stringify(
          this.shareQuery
        )}`;
        break;
    }
    this.getPosterFn();
  },

  created() { },

  mounted() { },
  methods: {
    shareImg() {
      this.loading = true;
      this.text = "下载中";
      wx.downloadFile({
        url: `${this.postersImgUrl}`, //分享的图片的链接
        success: (res) => {
          this.loading = false;
          this.text = "图片分享保存";
          wx.showShareImageMenu({
            path: res.tempFilePath,
            success: () => { },
            fail: (res) => {
              if (
                res.errMsg.indexOf("deny") != -1 ||
                res.errMsg.indexOf("denied") != -1
              ) {
                wx.showToast({
                  title: "保存相册失败，请设置权限！",
                  icon: "none",
                  duration: 2000,
                });
              }
            },
          });
        },
        fail: () => {
          wx.showToast({
            title: "图片下载失败，请检查网络",
            icon: "none",
            duration: 2000,
          });
          this.loading = false;
          this.text = "图片分享保存";
        },
      });
    },
    getPosterFn() {
      uni.showLoading({
        title: "加载中",
      });
      const params = {
        cardType: this.cardType,
        personId: uni.getStorageSync("person-id").slice(2),
        posterUrl: encodeURIComponent(this.sharePath),
      };
      getPoster(params)
        .then((res) => {
          uni.hideLoading();
          if (res.code == 200) {
            this.postersImgUrl = res.data;
          } else {
            this.$refs.uToast.show({
              title: res.status_desc,
              duration: 2000,
            });
          }
        })
        .catch((err) => {
          uni.hideLoading();
          this.$refs.uToast.show({
            title: err.status_desc,
            duration: 2000,
          });
        });
    },
    cancelCareerPathIndex() {
      uni.navigateTo({
        url: "/pagesSub/userCenter/careerPathV2/index",
      });
    },
    myPageScroll(e) {
      //滚动改变颜色
      this.showTop = e.target.scrollTop > 10;
      if (this.showTop) {
        this.dynamicColor = "#fff";
      } else {
        this.dynamicTitle = "";
        this.dynamicColor = "transparent";
      }
    },
  },
};
</script>

<style lang="scss" scoped>
$img-base-person: $img-base + "careerPath/";

@font-face {
  font-family: "D-DIN-PRO-700-Bold";
  /*定义字体名称*/
  src: url("https://img3.job1001.com/ypMp/elan/images/career/positionDictionary/D-DIN-PRO-700-Bold.ttf");
}

.title-container {
  display: flex;
  flex-direction: row;

  .return-index {
    position: absolute;
    left: 70rpx;
  }
}

.posters-container {
  width: 100%;
  height: 100vh;

  .container {
    height: 100%;
  }

  .posters {
    width: 100%;
    padding-bottom: calc(env(safe-area-inset-bottom) + 124rpx);
    padding-bottom: calc(constant(safe-area-inset-bottom) + 124rpx);
  }

  .operate-bar {
    display: flex;
    justify-content: space-around;
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 99;
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);

    .save-btn {
      flex-shrink: 0;
      margin: 82rpx 0 4rpx;
      width: 90%;
    }
  }
}
</style>
